<template>
    <div>
        <el-card class="crumbs-card">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/main/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/main/first' }">订单列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-card>
        <el-card class="container">
            <el-table
                    :data="orderList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="订单号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="ostate"
                        label="下单状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.ostate === 1?'已下单':'未下单'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="inState"
                        label="入住状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.inState === 1?'已入住':'未入住'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pstate"
                        label="支付状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.pstate === 1?'已支付':'未支付'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="outState"
                        label="退房状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.outState === 1?'已退房':'未退房'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="back"
                        label="退款状态"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.back === 1?'已退款':'未退款'}}
                        {{scope.row.back === null ? '未申请退款':'申请退款'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="inNum"
                        label="入住人数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="inTime"
                        label="入住时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="outTime"
                        label="离开时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orTime"
                        label="下单时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="180">
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleComment(scope.row)">评论
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleBack(scope.row.id)">退款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageNoChange"
            :background="true"
            :current-page="pageNo"
            :page-sizes="[5, 10, 20,40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            <el-dialog
                    title="评论界面"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="评论">
                        <el-input v-model="hotelComment"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>import {backOrder, selectOrder, _getUserInfo, commentOrder} from '@api/order'
export default {
  name: 'OrderList',
  data: function () {
    return {
      dialogVisible: false,
      orderList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      username: '',
      oState: '',
      inState: '',
      pState: '',
      outState: '',
      back: '',
      inNum: '',
      price: '',
      queryName: '',
      queryPrice: '',
      id: '',
      idthis: '',
      namethis: '',
      numthis: '',
      idNumthis: '',
      hotelComment: '',
      hId: '',
      oId: ''
    }
  },
  created () {
    // 页面加载执行
    this.queryOrder()
    _getUserInfo().then(res => {
      console.log(res.data)
      this.idthis = res.data.id
      this.namethis = res.data.username
      this.numthis = res.data.phoneNum
      this.idNumthis = res.data.idNum
    })
  },
  methods: {
    save () {
      let data = {
        hId: this.hId,
        oId: this.oId,
        content: this.hotelComment
      }
      commentOrder(data).then(res => {
        console.log(res.data)
      })
    },
    handleComment (item) {
      console.log(item)
      this.hId = item.hid
      this.oId = item.id
      this.dialogVisible = true
    },
    handleBack (id) {
      this.$confirm('是否退款', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id)
        backOrder(id).then(res => {
          console.log(res)
          this.queryOrder()
        })
      })
    },
    queryOrder () {
      selectOrder(this.idthis).then(res => {
        console.log(res.data)
        this.orderList = res.data
      })
    },
    pageSizeChange (value) {
      console.log(value)
      this.pageSize = value
      this.queryOrder()
    },
    pageNoChange (value) {
      console.log(value)
      this.pageNo = value
      this.queryOrder()
    }

  }

}
</script>
